.filter_panel {
  background-color: #fff;
  .filter_view {
    position: relative;
    background-color: #fff;
    .filter_panel_title {
      height: 40px;
      display: flex;
      .title_item {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .active {
        background-color: #21b97a;
        color: #fff;
      }
    }
    .filter_content {
      // pickerview 筛选组件结构

      .picker_content {
        .filter_btns {
          height: 35px;
          display: flex;
          font-size: 15px;
          border-top: 1px solid #ccc;
          border-bottom: 1px solid #ccc;
          .filter_btns_item {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .filter_btns_item:nth-child(1) {
            color: #21b97a;
            background-color: #fff;
            flex: 1;
          }
          .filter_btns_item:nth-child(2) {
            color: #fff;
            background-color: #21b97a;
            flex: 3;
          }
        }
      }

      // 第四个筛选组件
      .other_content {
        .other_filter_main {
          height: calc(100vh - 50px);
          overflow: auto;
          .other_groups {
            padding: 10px;
            border-bottom: 1px dashed #ccc;
            .other_groups_title {
              color: #000;
              font-size: 15px;
              padding: 10px 0;
            }

            .other_groups_content {
              display: flex;
              flex-wrap: wrap;
              .other_item {
                width: 70px;
                height: 30px;
                font-size: 12px;
                border: 1px solid #eee;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 10px;
                margin-bottom: 10px;
              }
              .active{
                background-color: #21b97a;
                color: #fff;
              }
            }
          }
        }

        .other_filter_btns {
          height: 50px;
          border-top: 1px solid #ccc;
          display: flex;
          .other_btn {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
          }
          .other_btn:nth-child(1) {
            color: #21b97a;
            flex: 2;
          }
          .other_btn:nth-child(2) {
            background-color: #21b97a;
            color: #fff;
            flex: 5;
          }
        }
      }
    }
  }
  .mask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .5;
    z-index: 999;
  }
}


// 控制 筛选的标题是否被显示或者隐藏
.top_mask{
  .filter_view{
    z-index: 1000;
  }
}